<template>
	<!-- <view class="chat-footer">
		<view class="chat-footer-top">
			<ImageBoxVue src="/static/msg/msg_speak.png" width="60rpx" height="60rpx"></ImageBoxVue>
			<view class="chat-input">
				<textarea @confirm="confirm" auto-height confirm-type="send" maxlength="-1" class="chat-input-textarea" v-model="chatContent"></textarea>
				
			</view>
			<ImageBoxVue src="/static/msg/msg_face.png" width="60rpx" height="60rpx"></ImageBoxVue>
			<ImageBoxVue @click="handleShowBtns" src="/static/msg/mag_add.png" width="60rpx" height="60rpx">
			</ImageBoxVue>
		</view>
		<view v-if="showBtns" class="chat-footer-bottom" :class="{ 'show': showBtns }">
			<view class="btn flex flex-col" v-for="e,i in btns" :key="i">
				<view class="btn-item">
					<ImageBoxVue :src="e.url" width="60rpx" height="60rpx"></ImageBoxVue>
				</view>
				<text>{{e.text}}</text>
			</view>
		</view>
	</view> -->
	<view class="p-20 w-full bg-white" :style="{paddingBottom:keyHeight}">
		<view class="flex items-center">
			<view class="flex flex-col justify-center items-center p-20 mr-20 bg-[#329EFF] text-white rounded-lg"
				@click="inputType=!inputType">
				<template v-if="inputType">
					<view>切换</view>
					<view>语音</view>
				</template>
				<template v-else>
					<view>切换</view>
					<view>文字</view>
				</template>
			</view>
			<!-- <ImageBoxVue src="/static/msg/msg_speak.png" width="60rpx" height="60rpx" @click="inputType=!inputType">
			</ImageBoxVue> -->
			<uni-easyinput v-if="inputType" type="textarea" v-model="msg" class="mx-10" placeholder="说点什么" :cursorSpacing="40"
				:adjust-position="false" @keyboardheightchange="keyboardheightchange" @confirm="confirm()" @blur="confirm()" />
			<getSoundVue v-else @createCustomMessage="createCustomMessage"></getSoundVue>
			<!--<view class="flex justify-center items-center shadow p-20 rounded-lg flex-1" v-else
				@touchstart="startRecord">
				<text>按住说话</text>
			</view> -->
			<!-- <view class="flex items-center">
				<view class="flex items-center" v-if="msg">
					<button size="mini" style="width:100rpx;padding: 0px;" class="flex" type="primary" @click="confirm()">
						<text class="text-xs">发送</text></button>
				</view>
				<ImageBoxVue @click="showBtns=!showBtns" v-else src="/static/msg/mag_add.png" width="60rpx" height="60rpx">
				</ImageBoxVue>
			</view> -->
		</view>
	</view>
</template>

<script setup>
	import {
		nextTick,
		ref
	} from 'vue'
	import indexApi from '@/apis/apiList/indexApi'
	import getSoundVue from './getSound.vue'
	import msgApi from '@/apis/apiList/msgApi'
	import liveApi from '@/apis/apiList/liveApi'
	// import AddPostVue from '@/pages/msg/AddPost';
	import communityApi from '@/apis/apiList/communityApi'
	const showBtns = ref(false)
	const keyHeight = ref('20px')
	const msg = ref("")
	// const popupRef = ref()
	const inputType = ref(true)
	// const typeList = ref([])
	const giftList = ref([])
	const user = uni.getStorageSync('user')
	const giftPopup = ref()
	let fromAccount = ""
	let formName = ''
	const emits = defineEmits(['confirm', 'scrollToBottom', 'createCustomMessage'])
	const btns = ref([{
		text: '发送图片',
		key: "img",
		url: '/static/msg/footer1.png'
	}])
	const keyboardheightchange = (e) => {
		keyHeight.value = `${e.detail.height+20||20}px`
		if (e.detail.height !== 0) {
			showBtns.value = false
			emits('scrollToBottom')
		}
	}
	const createCustomMessage = (e) => {
		emits('createCustomMessage', e)
	}
	// 发送
	const confirm = () => {
		emits('confirm', msg.value)
		nextTick(() => {
			msg.value = ''
		})
	}
	let formHeadimg = ""
	const onInit = (e) => {
		console.log(e);
		fromAccount = e.fromAccount
		formName = e.nickname
		formHeadimg = e.headimg
	}
	defineExpose({
		showBtns,
		onInit
	})
</script>

<style lang="scss" scoped>
	// 	.chat-footer {
	// 		.chat-footer-top {
	// 			width: 100vw;
	// 			min-height: 88rpx;
	// 			border-top: 2rpx solid #eee;
	// 			padding: 4rpx 30rpx;
	// 			display: flex;
	// 			align-items: center;
	// 			justify-content: space-between;

	// 			.chat-input {
	// 				width: 450rpx;
	// 				min-height: 72rpx;
	// 				max-height: 400rpx;
	// 				border-radius: 36rpx;
	// 				background-color: #F0F3F4;
	// 				display: flex;
	// 				align-items: center;
	// 				overflow-y: auto;

	// 				.chat-input-textarea {
	// 					max-height: 400rpx !important;
	// 					padding: 14rpx;
	// 					box-sizing: border-box;
	// 				}
	// 			}
	// 		}

	// 		.chat-footer-bottom {
	// 			box-sizing: border-box;
	// 			display: flex;
	// 			flex-wrap: wrap;
	// 			justify-content: space-between;
	// 			max-height: 0;
	// 			opacity: 0;
	// 			overflow: hidden;
	// 			transition: all 1s ease;
	// 			padding: 0 20rpx;

	// 			&.show {
	// 				max-height: 500rpx;
	// 				opacity: 1;
	// 				padding: 20rpx;
	// 			}

	// 			.btn {
	// 				margin-right: 64rpx;
	// 				margin-bottom: 24rpx;
	// 				align-items: center;
	// 			}

	// 			.btn:nth-child(4n) {
	// 				margin-right: 0;
	// 			}

	// 			.btn:nth-child(n+5) {
	// 				margin-bottom: 0;
	// 			}

	// 			.btn-item {
	// 				width: 120rpx;
	// 				height: 120rpx;
	// 				background: #E5F6FF;
	// 				border-radius: 20rpx;
	// 				display: flex;
	// 				align-items: center;
	// 				justify-content: center;
	// 				margin-bottom: 12rpx;
	// 			}
	// 		}
	// 	}
	// 
</style>